class Kline {
    intervalId;
    chart ={};
    constructor(
      options
    ) {
        const   {elem,theme,createIndicator,getHistory,getCurrentData,setMainIndicator,setSubIndicator} = options || {};
        this.elem = elem;
        this.createIndicator = createIndicator;
        this.theme = theme;
        this.getHistory = getHistory;
        this.getCurrentData = getCurrentData;
        this.init();
    }
    init(){
        this.chart =  klinecharts.init(this.elem);
        this.chart.createIndicator('MA', false, { id: 'candle_pane' })
        this.chart.createIndicator('VOL')
    }
    registerStyles(key,style) {
        klinecharts.registerStyles(key,style);
        return this;
    }
    setTheme (theme) {
        this.chart.setStyles(theme)
        if (theme === 'light') {
            document.getElementById(this.elem).style.backgroundColor = '#ffffff'
        } else if (theme === 'dark') {
            document.getElementById(this.elem).style.backgroundColor = '#1b1b1f'
        }
    }
    main() {
        clearInterval(this.intervalId);
        this.getHistory()
        this.chart.applyNewData(historyData,true);
        this.setTheme(theme);
        this.setType(type)
        this.chart.setStyles({
            candle: {
               tooltip: {
                   showRule:'none'
               }
           },
            indicator: {
                tooltip: {
                    showRule:'always',
                }
            }
       });
        this.getCurrentData();
        this.current();
    }
    current() {
        this.intervalId = setInterval(()=>{
            this.getCurrentData();
            this.chart.updateData(currentData,()=>{
            });
        },2000)

    }
    setType(type) {
        this.chart.setStyles({
            candle: { type }
        });
    }
}

function toggleSelector() {
    const items = document.querySelector('.selector-items');
    items.style.display = items.style.display === 'block' ? 'none' : 'block';
}
function tab(obj,index) {
    // 移除所有标签的active类
    if (index<5) {
        $(obj).parent().parent().find("li").removeClass("active");
        $(obj).parent().addClass("active")
    } else {
        $(".comm-tabs").find("li").removeClass("active");
        $(obj).parent().parent().parent().addClass("active");
        $(".selector").text($(obj).text());
    }
    interval = $(obj).attr("data");
    if (index>0) {
        type = "candle_solid";
    } else {
        type = "area";
    }
    kline.main();
}